<template>
    <button @click="goBack">后退</button>
    <h4>购票支付</h4>
    <div class="container">
    		<div class="left-side">
    			<img src="/public/j2.png" class="img-small"/>
    		</div>
    	<div class="right-side">
    	<table class="tab">
    		<tr>
    			<th>演出名称：</th>
    			<td>霸王别姬</td>
    		</tr>
    		<tr>
    			<th>剧情简介:</th>
    			<td>以梨园师兄弟程蝶衣和段小楼的人生经历和情感纠葛为线索，讲述了一段哀艳悲烈的往事。<br /></td>
    		</tr>
    		<tr>
    			<th>演出时间：</th>
    			<td>2024年11月23日 19:30</td>
    		</tr>
    		<tr>
    			<th>票价：</th>
    			<td>￥180</td>
    		</tr>
    		<tr>
    			<th>当前余票：</th>
    			<td>50张</td>
    		</tr>
    		<tr>
    			<th>购买数量:</th>
    			<td>1(一人仅限一张)</td>
    		</tr>
    		<tr>
    			<th>支付金额：</th>
    			<td>￥180.00</td>
    		</tr>
    	</table>
			<el-button type="primary" @click="buy" class="but">确定支付</el-button>
    	</div>
    </div>
    <!-- </div> -->
   
</template>

<script setup>
import { useRouter } from 'vue-router';
const router = useRouter()
const goBack = () => {
    router.back()
}

const buy = () =>{
	alert('支付成功')
}
</script>

<style lang="less" scoped>
.but{
	margin-left:30px;
}

.tab{
	line-height: 50px;
	margin: 30px;
}
.red-button{
	width: 300px;
	height: 40px;
	border-radius: 10px;
	background-color: red;
	border: none;
	margin-left: 800px;
}
.img-small{
	width: 550px;
	height: 700px;
}
.container {
  display: flex;
  // background-image: url(/public/bg3.png);
  // background - size: cover;
       // width: 300px;
       // height: 300px;
}
</style>